<template>
  <div class="box">
    <div class="a">
      <el-container class="aaaa">
        <el-header>Header</el-header>
        <el-container>
          <el-aside width="200px">Aside</el-aside>
          <el-container>
            <el-main>

              <el-tabs v-model="activeName">
                <el-tab-pane label="用户管理" name="first">
                  <div class="tab-wrap" v-if="activeName=='first'">
                    <div class="a_tab"></div>
                    <div class="a_tab"></div>
                    <div class="a_tab"></div>
                    <div class="a_tab"></div>
                    <div class="a_tab"></div>
                    <div class="a_tab"></div>
                    <div class="a_tab"></div>
                    <div class="a_tab"></div>
                    <div class="a_tab"></div>
                    <div class="a_tab"></div>
                    <div class="a_tab"></div>
                    <div class="a_tab"></div>
                    <div class="a_tab"></div>
                    <div class="a_tab"></div>
                    <div class="a_tab"></div>
                    <div class="a_tab"></div>
                  </div>

                </el-tab-pane>
                <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
                <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
                <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
              </el-tabs>

            </el-main>
          </el-container>
        </el-container>
      </el-container>
    </div>
    <div class="b">
      <div class="ba"></div>
      <div class="bb  ">
        <el-container>
          <!-- <el-header>Header</el-header> -->
          <header class="el-header" style="height:60px;flex:1">hed</header>
          <el-container>
            <el-aside width="200px">Aside</el-aside>
            <el-container>
              <el-main>
                <!-- <div class="a_tab"></div>
        <div class="a_tab"></div>
        <div class="a_tab"></div>
        <div class="a_tab"></div>
        <div class="a_tab"></div>
        <div class="a_tab"></div>
        <div class="a_tab"></div>
        <div class="a_tab"></div>
        <div class="a_tab"></div>
        <div class="a_tab"></div>
        <div class="a_tab"></div> -->

                <el-tabs v-model="activeName">
                  <el-tab-pane label="用户管理" name="first">
                    <div class="tab-wrap">
                      <div class="a_tab"></div>
                      <div class="a_tab"></div>
                      <div class="a_tab"></div>
                      <div class="a_tab"></div>
                      <div class="a_tab"></div>
                      <div class="a_tab"></div>
                      <div class="a_tab"></div>
                      <div class="a_tab"></div>
                    </div>

                  </el-tab-pane>
                  <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
                  <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
                  <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
                </el-tabs>
              </el-main>
            </el-container>
          </el-container>
        </el-container>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeName: "first",
    };
  },

  components: {},

  computed: {},

  mounted() {},

  methods: {},
};
</script>

<style scoped lang='scss'>
.box {
  width: 100%;
  height: 600px;
  border: 1px solid red;
  display: flex;
  flex-wrap: nowrap;
  .a {
    flex: 1;
    border: 1px solid yellow;
    display: flex;
    flex-direction: column;
  }
  .b {
    border: 1px solid darkblue;
    flex: 2;
    display: flex;
    flex-direction: column;
    .ba {
      flex: 1;
      border: 1px solid aqua;
    }
    .bb {
      flex: 6;
      border: 1px solid rebeccapurple;
      overflow: auto;
      display: flex;
      .bba {
        height: 100px;
        width: 70%;
        background: red;
        margin: 10px;
      }
    }
  }
}
.a_tab {
  height: 100px;
  width: 70%;
  background: red;
  margin: 10px;
}
.tab-wrap {
  height: 100%;
}
</style>
